<template>
	<!-- 商品分类导航 -->
	<div class="type-nav">
		<div class="container">
			<div class="nav-left" @mouseleave="isShow = false">
				<h2 class="all" @mouseenter="isShow = true">全部商品分类</h2>
				<div class="sort" v-show="$route.path === '/home' || isShow">
					<div class="all-sort-list2" @click="goSearch">
						<div class="item" v-for="c1 in categoryList" :key="c1.categoryId">
							<h3>
								<!-- <router-link
									:to="{
										name: 'Search',
										query: {
											category1Id: c1.categoryId,
											categoryName: c1.categoryName,
										},
									}"
									>{{ c1.categoryName }}</router-link
								> -->
								<!-- 这样写会创建非常多的绑定事件 因此使用事件委托给父元素 -->
								<a
									:data-name="c1.categoryName"
									:data-id="c1.categoryId"
									:data-level="1">
									{{ c1.categoryName }}
								</a>
							</h3>
							<div class="item-list clearfix">
								<div
									class="subitem"
									v-for="c2 in c1.categoryChild"
									:key="c2.categoryId">
									<dl class="fore">
										<dt>
											<a
												:data-name="c2.categoryName"
												:data-id="c2.categoryId"
												:data-level="2">
												{{ c2.categoryName }}
											</a>
										</dt>
										<dd>
											<em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
												<a
													:data-name="c3.categoryName"
													:data-id="c3.categoryId"
													:data-level="3">
													{{ c3.categoryName }}
												</a>
											</em>
										</dd>
									</dl>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<nav class="nav">
				<a href="###">服装城</a>
				<a href="###">美妆馆</a>
				<a href="###">尚品汇超市</a>
				<a href="###">全球购</a>
				<a href="###">闪购</a>
				<a href="###">团购</a>
				<a href="###">有趣</a>
				<a href="###">秒杀</a>
			</nav>
		</div>
	</div>
</template>

<script>
import { reqGetProductList } from '@/api/home'
export default {
	name: 'TypeNav',
	data() {
		return {
			categoryList: [],
			isShow: false,
		}
	},
	async mounted() {
		// 发送获取三级商品菜单
		const categoryList = await reqGetProductList()
		this.categoryList = categoryList
	},
	methods: {
		// 要接收 名字 id 还有区分是几级分类
		// goSearch(id, name, level) {
		// 	// 编程式跳转
		// 	this.$router.push({
		// 		name: 'Search',
		// 		query: {
		// 			[`category${level}Id`]: id,
		// 			categoryName: name,
		// 		},
		// 	})
		// },

		// 点击三级菜单跳转
		goSearch(e) {
			// dataset 可以获取标签身上的data属性
			const { id, name, level } = e.target.dataset
			if (!name) return

			const option = {
				name: 'Search',
				query: {
					categoryName: name,
					[`category${level}Id`]: id,
				},
			}

			// 判断用户是否输入数据  有就添加参数
			const keyword = this.$route.query.keyword
			if (keyword) {
				option.query.keyword = keyword
			}
			this.$router.history.push(option)
		},
	},
}
</script>

<style lang="less" scoped>
.type-nav {
	border-bottom: 2px solid #e1251b;

	.container {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		position: relative;

		.all {
			width: 210px;
			height: 45px;
			background-color: #e1251b;
			line-height: 45px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
		}

		.nav {
			a {
				height: 45px;
				margin: 0 22px;
				line-height: 45px;
				font-size: 16px;
				color: #333;
			}
		}

		.sort {
			position: absolute;
			left: 0;
			top: 45px;
			width: 210px;
			height: 461px;
			position: absolute;
			background: #fafafa;

			z-index: 999;

			.all-sort-list2 {
				height: 104%;
				overflow: hidden;
				.item {
					h3 {
						line-height: 30px;
						font-size: 14px;
						font-weight: 400;
						overflow: hidden;
						margin: 0;

						a {
							display: block;
							cursor: pointer;
							color: #333;
							padding: 0 20px;
						}
					}

					.item-list {
						display: none;
						position: absolute;
						width: 734px;
						min-height: 460px;
						background: #f7f7f7;
						left: 210px;
						border: 1px solid #ddd;
						top: 0;
						z-index: 9999 !important;

						.subitem {
							float: left;
							width: 650px;
							padding: 0 4px 0 8px;

							dl {
								border-top: 1px solid #eee;
								padding: 6px 0;
								overflow: hidden;
								zoom: 1;

								&.fore {
									border-top: 0;
								}

								dt {
									float: left;
									width: 54px;
									line-height: 22px;
									text-align: right;
									padding: 3px 6px 0 0;
									font-weight: 700;
								}

								dd {
									float: left;
									width: 415px;
									padding: 3px 0 0;
									overflow: hidden;

									em {
										float: left;
										height: 14px;
										line-height: 14px;
										padding: 0 8px;
										margin-top: 5px;
										border-left: 1px solid #ccc;
										&:hover {
											background-color: pink;
											cursor: pointer;
										}
									}
								}
							}
						}
					}

					&:hover {
						background-color: pink;
						.item-list {
							display: block;
						}
					}
				}
			}
		}
	}
}
</style>
